<template>
  <div>
    <ul>
      <li v-for="(v, index) in list" :key="index">
        <img :src="v.src" alt="" />
        <p class="myp">{{v.p1}}</p>
        <p class="p2">{{v.p2}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: "https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/143446/26/31914/124868/63b5a395Fa48748ca/fd89630b72aaed3b.jpg!q70.dpg.webp",
          p1: "林清轩山茶花修护精华油30ml 4.0内修外抗以油养肤淡纹小皇瓶护肤油",
          p2: "￥795.00",
        },
        {
          src: "https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/33544/5/18394/163163/63a3b69eE5ed8f542/5c6465de9fe39aa7.jpg!q70.dpg.webp",
          p1: "林清轩山茶花修护精华油30ml 4.0内修外抗以油养肤淡纹小皇瓶护肤油",
          p2: "￥795.00",
        },
        {
          src: "https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/30485/22/19722/66998/6397033cEbe1961a9/ee1a4718e43bcf28.jpg!q70.dpg.webp",
          p1: "林清轩山茶花修护精华油30ml 4.0内修外抗以油养肤淡纹小皇瓶护肤油",
          p2: "￥795.00",
        },
          {
          src: "https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/143446/26/31914/124868/63b5a395Fa48748ca/fd89630b72aaed3b.jpg!q70.dpg.webp",
          p1: "林清轩山茶花修护精华油30ml 4.0内修外抗以油养肤淡纹小皇瓶护肤油",
          p2: "￥795.00",
        },
        {
          src: "https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/33544/5/18394/163163/63a3b69eE5ed8f542/5c6465de9fe39aa7.jpg!q70.dpg.webp",
          p1: "林清轩山茶花修护精华油30ml 4.0内修外抗以油养肤淡纹小皇瓶护肤油",
          p2: "￥795.00",
        },
        {
          src: "https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/30485/22/19722/66998/6397033cEbe1961a9/ee1a4718e43bcf28.jpg!q70.dpg.webp",
          p1: "林清轩山茶花修护精华油30ml 4.0内修外抗以油养肤淡纹小皇瓶护肤油",
          p2: "￥795.00",
        },
      ],
    };
  },
};
</script>

<style scoped>
div{
    display: auto;
}
ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
li{
    width: 172px;
    height: 236px;
}
img{
    width: 172px;
    height: 172px;
}

.myp{
            width: 173px;
            height: 32px;
            font-size:14px;
            line-height: 16px;
            /* background-color: aqua; */
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /* white-space: nowrap; */
}
.p2{
    color: red;
}
</style>